<template>
    <div class="page-language">
        <van-nav-bar left-arrow @click-left="$router.back(-1)" :title="$t('m.Language')" style="color:#fff;" /><!--$t('m.Language')-->
        <van-radio-group>
            <van-cell-group>
                <van-cell :title="item.text" v-for="(item, index) in languages" :key="index" :class="[checkedLan == item.value  ? activeClass : '',]" @click="changeLang(item)"/>
            </van-cell-group>
        </van-radio-group>
    </div>

</template>

<script>
    export default {
        name: 'Language',
        data() {
            return {
                checkedLan: '',
                activeClass: 'active-class',
            };
        },
        computed: {
            languages() {
                if (this.$store.state.store.localLang == 'MM') {
                    return [
                        {'text': 'ျမန္မာ', 'value': 'MM'},
                        {'text': 'English', 'value': 'US'},
                    ]
                } else if (this.$store.state.store.localLang == 'MMU') {
                    return [
                        {'text': 'မြန်မာ', 'value': 'MM'},
                        {'text': 'English', 'value': 'US'},
                    ]
                } else {
                    return [
                        {'text': 'Myanmar', 'value': 'MM'},
                        {'text': 'English', 'value': 'US'},
                    ]
                }
            },
        },
        methods: {
            // 切换语言
            changeLang(item) {
                this.checkedLan = item.value;
                if(item.value === 'US'){
                    this.$i18n.locale = 'US'
                    this.$store.commit('store/updateLang', 'US')
                    this.langImage = '../static/img/images/myanmar.png'
                    localStorage.setItem('lang','US')
                } else if (item.value === 'MM') {

                    // zawgyi
                    this.$i18n.locale = 'MM'
                    this.$store.commit('store/updateLang', 'MM')
                    this.langImage = '../../static/usLang.png'
                    localStorage.setItem('lang','MM')

                    // if(myUnicode.check()){
                    //
                    //     // uincode
                    //     this.$i18n.locale = 'MMU'
                    //     this.$store.commit('store/updateLang', 'MMU')
                    //     this.langImage = '../../static/usLang.png'
                    //     localStorage.setItem('lang','MMU')
                    // }else {
                    //
                    //     // zawgyi
                    //     this.$i18n.locale = 'MM'
                    //     this.$store.commit('store/updateLang', 'MM')
                    //     this.langImage = '../../static/usLang.png'
                    //     localStorage.setItem('lang','MM')
                    // }
                }
                this.$router.back(-1)
            }
        },
        mounted() {
            if (this.$i18n.locale) {
                if (this.$i18n.locale === 'MM' || this.$i18n.locale === "MMU") {
                    this.checkedLan = 'MM'
                } else {
                    this.checkedLan = this.$i18n.locale
                }
            } else {
                this.checkedLan = 'US'
            }

        }
    };
</script>
<style>
    .page-language .van-nav-bar{
        /*background-color: #FF9900;*/
        background-color: #f2f2f2;
        color: #333;
        z-index: 9;
    }
    .page-language .van-nav-bar .van-icon{
        color: #C8C8C8;
        margin-right: 15px;
        font-size: 18px;
    }
    .page-language .van-nav-bar .van-nav-bar__title{
        color: #333;
    }
</style>
<style scoped>
.active-class{
    color: #f90;
}
</style>

